<template>
  <view>
    <view class="conta">
      <view class="img-box">
        <image lazy-load class="img" mode="aspectFill" :src="`${baseUrl}${imgInfo.myMark}`"></image>
      </view>
      <!-- ------------------------ 参数-开始 ------------------------ -->
      <view class="power-system" v-if="imgInfo.config">
        <view class="item" v-for='item in paramList' :key='item.id'>
          <view class="val ">{{ item.prop_valCtt }}</view>
          <view class="name ">{{ item.prop_name }}</view>
        </view>
      </view>
      <!-- ------------------------ 标题与内容**start ------------------------ -->
      <view class="content-box" :style="[titleStyle]">
        <view class="title"> {{ imgInfo.title }}
        </view>
        <view class="content"> {{ imgInfo.content }}
        </view>
      </view>
    </view>
  </view>
</template>
<script>
let brand = 'ZEEKR'
export default {
  name: "DetailImage",
  data() {
    return {
      // 基础路径
      baseUrl: `${this.$baseUrl}/images/${brand}/car/`,
    };
  },
  props: {
    imgInfo: {
      type: Object,
      default() {
        return {}
      }
    },
    powerSystem: {
      type: Array,
      default() {
        return []
      }
    },
  },
  computed: {
    titleStyle() {
      let { position, color = '#fff' } = this.imgInfo
      let { type: typeY = 'top' } = position.y
      let { type: typeX = 'left' } = position.x
      let top = typeY === 'top' ? '18vh' : typeY === 'center' ? '45vh' : "75vh"
      return { top, color, textAlign: typeX }
    },
    paramList() {
      // return this.powerSystem
      // return this.powerSystem.filter(item => item.propt_parent_id == 14500)
      return this.powerSystem.filter(item => item.propt_parent_id == this.imgInfo.config)
    }
  }

};
</script>

<style lang="scss" scoped>
.conta {
  position: relative;

  .img-box {
    width: 100%;
    height: 100vh;

    .img {
      width: 100%;
      height: 100%;
    }
  }

  // ------------------------ 动力传动系统-开始 ------------------------
  .power-system {
    width: 80%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    // text-align: center;
    position: absolute;
    bottom: 10vh;
    flex-wrap: wrap;
    // top: 45vh;
    left: 10%;
    z-index: 120;
    // color: #fff;
    color: #222;
    text-align: left;

    .item {
      width: 50%;
      margin-bottom: 40rpx;
    }

    .val {
      // font-size: 36rpx;
      line-height: 70rpx;
      font-size: 42rpx;
      font-weight: 600;
      // font-family: 'LynkcoType-Medium';
    }

    .name {
      font-size: 26rpx;
      font-weight: 400;
      // text-align: left;
    }
  }

  // ------------------------ 标题与内容**start ------------------------
  .content-box {
    width: 90%;
    position: absolute;
    // top: 18vh;
    left: 5%;
    z-index: 110;

    .title {
      // font-weight: 600;
      font-size: 48rpx;
      line-height: 50rpx;
      margin-bottom: 20rpx;
      white-space: pre-wrap;
      font-family: 'LynkcoType-Medium';
    }

    .content {
      font-size: 28rpx;
    }
  }

  .titlePositionYT {
    top: 18vh;
  }

  .titlePositionYT {
    top: 45vh;
  }

  .titlePositionYT {
    top: 75vh;
  }
}
</style>
